<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-20 13:50:33
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-12-13 14:00:38
 * @FilePath: /hr_new_vue3/src/components/ContractTemplateModal/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 预览人员模板 -->
<template>
  <a-modal
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    width="80%"
    :mask-closable="false"
    title-align="center"
    :body-style="{
      minHeight: '500px'
    }"
    unmount-on-close
  >
    <template #title> 预览 </template>
    <div
      class="subDetail"
      v-for="item in data.data"
      :key="(item.subCode as string)"
    >
      <div class="head">
        <div class="sub-title">
          <p class="icon"></p>
          {{ item.cnName }}
        </div>
        <!-- <div class="setting" @click="change">设置</div> -->
      </div>
      <a-divider></a-divider>
      <div style="padding: 0 20px; margin: auto">
        <a-form ref="HumanForm" :model="item.controlModel" autoLabelWidth>
          <a-row :gutter="16">
            <a-col
              :span="ele.span ? ele.span : 12"
              v-for="(ele, index) in item.controlModel"
              :key="index"
            >
              <FormItem
                :disabled="true"
                :componentType="(ele?.ctlComponentType as string)"
                :props="(ele?.props as any)"
                :name="(ele?.ctlCnName as string)"
                :required="(ele?.ctlRequired as any)"
                v-model:values="ele.ctlValue.ctlValue"
                :code="(ele?.ctlCode as any)"
                :selectOptions="ele.selectOptions"
              />
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import FormItem from '@/components/DynamicFormsNew/RenderingForm/FormItem/index.vue';
import { GetStaffDetails } from '@/apis/management/personnel/baseSetting/TransactionSetting';

const props = defineProps<{
  visible: boolean;
  id: number; // 人员id
}>();

const emits = defineEmits(['update:visible']);
const data: any = reactive({ data: [] });

const getData = async () => {
  try {
    const resData: any = await GetStaffDetails({ id: Number(props.id) });
    data.data = resData.useTemplate.collectionModel || [];
    console.log('======================data==============');
    console.log(data.data);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      getData();
    }
  }
);

const handleOk = () => {
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>
<style scoped lang="less">
.subDetail {
  .head {
    box-sizing: border-box;
    border-radius: 4px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    // background-color: #e8f0ff;
    margin: 20px 0;
    .sub-title {
      display: flex;
      align-items: center;
      .icon {
        border-radius: 4px;
        width: 6px;
        height: 70%;
        background-color: #3d7eff;
        height: 20px;
        padding: 0;
        margin: 3px 0;
        margin-right: 10px;
      }
    }
    .setting {
      color: #3d7eff;
      cursor: pointer;
    }
  }
}
</style>
